<template>
  <div>
    <t-dialog header="切换云展模式" :visible="visible" :on-close="close" :on-confirm="onConfirmAnother">
      <template #body>
        <div class="mg-top-style">
          <div class="heard-message hw-box-style-flex hw-box-style-flex-r-center">
            <t-icon name="error-circle-filled" style="font-size: 18px; color: #ed7b2f" />
            <span>操作提示：切换云展模式可能导致与内容不匹配，请谨慎操作</span>
          </div>
          <t-row :gutter="24">
            <t-col :span="6">
              <div class="hw-flex-style-c-c-c" @click="parmas.mode = 1">
                <div class="img-box"></div>
                <div class="btm-box hw-flex-style-c-c-c">
                  <div class="radio-boxs hw-flex-style-c-c">
                    <t-radio :checked="parmas.mode == 1">模版模式</t-radio>
                    <img
                      v-show="props.type == 1"
                      src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/modeType.svg"
                      alt=""
                      class="mode-img"
                    />
                  </div>
                  <span class="btm-text">满足专业策展人员按照规划的策展单元，讲述展品的历史。</span>
                </div>
              </div>
            </t-col>
            <t-col :span="6">
              <div class="hw-flex-style-c-c-c">
                <div class="img-box"></div>
                <div class="btm-box hw-flex-style-c-c-c">
                  <div class="radio-boxs hw-flex-style-c-c">
                    <t-radio :checked="parmas.mode == 2" :disabled="true">自由模式</t-radio>
                    <img
                      v-show="props.type == 2"
                      src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/modeType.svg"
                      alt=""
                      class="mode-img"
                    />
                  </div>

                  <span class="btm-text">自由模式会按展品的历史发展维度呈现。</span>
                </div>
              </div>
            </t-col>
          </t-row>
        </div>
      </template>
      <template #footer>
        <div class="footer-box" style="border-shadow: none">
          <div class="hw-box-end-box">
            <t-button variant="outline" @click="close">取消</t-button>
            <t-button @click="onConfirmAnother" :loading="loading">确定切换</t-button>
          </div>
        </div>
      </template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { addProject } from '@/api/project/project';
import { url, heards, urls } from '@/utils/request/upload';
import { ref, reactive } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
const uploadAllFilesInOneRequest = ref(false);
const form = ref(null);
const loading = ref(false);
const props = defineProps({
  visible: {
    type: Boolean,
  },
  type: {
    type: Number,
  },
});
const rules = {
  name: [{ required: true, message: '项目名称必填', type: 'error' }],
};
const parmas = reactive({
  mode: 1,
});
parmas.mode = props.type;
const emit = defineEmits(['close', 'submit']);
const onConfirmAnother = (context) => {
  emit('submit', parmas.mode);
};

const close = (context) => {
  //取消按钮
  emit('close');
};
const onSuccess = (e) => {
  parmas.coverUrl = String(e.response.data);
};
</script>

<style lang="less" scoped>
.img-box {
  width: 100%;
  height: 274px;
  background: #d8d8d8;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
.btm-box {
  position: relative;
  width: 100%;
  padding: 16px 32px;
  min-height: 116px;
  background: #ffffff;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  border-radius: 0px 0px 4px 4px;
}
.btm-text {
  margin-top: 8px;
  font-size: 16px;
  color: #666666;
}
.upload-box {
  width: 120px;
  height: 120px;
  margin-right: 20px;

  img {
    width: 120px;
    height: 120px;
  }
}
.footer-box {
  display: flex;
  align-items: center;
  justify-content: center;
  //   height: 72px;
  // padding-top: 32px;
  // box-shadow: inset 0px 1px 0px 0px rgba(230, 230, 230, 0.5);
}
.mg-top-style {
  // margin-top: 16px;
}
.heard-message {
  width: 100%;
  padding: 18px 25px;
  background: #f9e0c7;
  border-radius: 6px;
  border: 1px solid #fbcea1;
  span {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.9);
    line-height: 22px;
    margin-left: 8px;
  }
}
.mode-img {
  position: absolute;
  top: -20px;
  right: -46px;
  width: 128px;
  height: 64px;
}
.radio-boxs {
  width: 100%;
  // height: 64px;
  position: relative;
  margin-bottom: 8px;
}
.t-row {
  margin-top: 24px;
}
:deep(.t-radio__label) {
  font-size: 16px;
  color: #333;
}
</style>
